<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-toolbar-title>口算练习器</q-toolbar-title>
      </q-toolbar>
      <q-tabs v-model="activeTab" inline-label class="bg-primary text-white shadow-2">
        <q-tab name="generator" icon="add_circle" label="智能出题" @click="router.push('/')" />
        <q-tab name="scanner" icon="photo_camera" label="拍照批改" @click="router.push('/scanner')" />
        <q-tab name="analysis" icon="bar_chart" label="结果分析" @click="router.push('/analysis')" />
      </q-tabs>
    </q-header>
    curl "https://api.cloudflare.com/client/v4/user/tokens/verify" -H "Authorization: Bearer 7L3qUDQlFEFdBEr1rdcOp2xJPmHVJ7L6WaB5W_UC"
    <q-page-container>
      <q-page padding>
        <div class="q-pa-md">
          <router-view></router-view>
        </div>
      </q-page>
    </q-page-container>

    <q-footer elevated class="bg-grey-8 text-white">
      <q-toolbar>
        <q-toolbar-title>
          <div class="text-center">口算练习器 v1.0 - 为一年级学生提供智能数学练习 - by LanDi</div>
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeTab = ref('generator');

// 监听路由变化，更新当前标签
watch(() => router.currentRoute.value.path, (path) => {
  if (path === '/') {
    activeTab.value = 'generator';
  } else if (path === '/scanner') {
    activeTab.value = 'scanner';
  } else if (path === '/analysis') {
    activeTab.value = 'analysis';
  }
}, { immediate: true });
</script>

<style scoped>
.floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
</style> 